<!--奖励机制-->
<template>
	<view class="">
		<view class="hdtybox" :class="hdc">
			<topboxVue :tit="$t('hd.bt10')"></topboxVue>
			<view class="jlbox">

				<view class="jlbox-top bj_between">
					<view class="">
						<view class="mb40">
							<text class="f26" style="margin-right: 20rpx;">{{$t("lv.st1")}}</text>
							<text class="f30 fwb">{{lname}}</text>
						</view>
						<view class="f26 mb10">
							{{$t("lv.st2")}}
						</view>
						<view class="cy fwb f30">
							{{$t("menu.$")}}{{user.user.money}}
						</view>
					</view>
					<view class="tc">
						<image :src="lpic" class="jlbox-top-dp"></image>
						<view class="jlbox-top-btn" @click="qd">
							{{$t("lv.btn1")}}
						</view>
					</view>
				</view>

				<view class="jlbox-b1 mb40">

					<view class="jlbox-b1-item" v-for="(item , i) in vlist">
						<view class="jlbox-b1-item-box bj_sx" :class="item.ch ? 'jlbox-b1-item-ch' : ''">
							<image :src="common.websiteUrl + item.pic" mode=""></image>
							<view class="">
								{{item.name}}
							</view>
						</view>
						<view class="jlbox-b1-item-xz" v-if="item.ch">
							<view class="jlbox-b1-item-xz-xd"></view>
						</view>
						<view class="jlbox-b1-item-num">
							{{item.daily_bonus}}
						</view>
					</view>

				</view>

				<view class="f30 fwb mb20">
					{{$t("lv.tit1")}}
				</view>
				<view class="clearfloat mb50">
					<view class="jlbox-mitem bj_between" v-for="(item , i) in vlist">
						<view class="jlbox-mitem-picb bj_center">
							<image :src="common.websiteUrl + item.pic"></image>
						</view>
						<view class="jlbox-mitem-txt bj_center">
							{{$t("menu.$")}}{{item.checkin_bonus}}
						</view>
					</view>
				</view>

				<view class="f30 fwb mb20">
					{{$t("lv.tit2")}}
				</view>
				<view class="f22 c9c mb10">
					{{$t("lv.txt1")}}
				</view>
				<view class="f22 c9c mb10">
					{{$t("lv.txt2")}}
				</view>

			</view>
			<bottomVue></bottomVue>
			<zero-loading type="surround" v-if="loading"></zero-loading>

		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>

</template>

<script setup>
	import {
		ref,
		inject,
		provide
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import bottomVue from "../common/bottom-slotsbr.vue";
	import common from '../../js/common';
	const {
		t
	} = useI18n()
	provide("repage", repage);
	// 父级关闭活动的方法
	const clhd = inject("clhd");
	let hdc = ref("hdpagein")
	let loading = ref(false)
	let messageText = ref("")
	let message = ref(null)
	let msgType = ref("")

	function repage() {
		hdc.value = "hdpageout";
		clhd();
	}

	let user = ref({})
	// 等级名称
	let lname = ref("")
	// 当前等级图片
	let lpic = ref("")

	let vlist = ref([])

	onShow(function() {
		user.value = getApp().globalData.userInfo
		// console.log(user.value);

		vlist.value = user.value.vipinfo.vips
		for (var i = 0; i < vlist.value.length; i++) {
			if (vlist.value[i].level == user.value.vipinfo.level) {
				lname.value = vlist.value[i].name
				lpic.value = common.websiteUrl + vlist.value[i].pic
				vlist.value[i].ch = true
			} else {
				vlist.value[i].ch = false
			}
		}
	})

	function qd() {
		if (loading.value) {
			return
		}
		loading.value = true

		common.checkin().then(res => {
			loading.value = false
			messageText.value = res.data.message
			if(res.data.success){
				msgType.value = "success"
				common.getMinLoginUser({}, {
					"token": getApp().globalData.userInfo.token
				}).then(res => {
					getApp().globalData.userInfo.user = res.data.user
				})
			} else {
				msgType.value = "error"
			}
			message.value.open();
			
		})
	}
</script>

<style scoped lang="scss">
	.jlbox {
		padding: 40rpx 20rpx 60rpx;

		&-top {
			width: 710rpx;
			height: 220rpx;
			background: url("/static/hd/jzb.png") no-repeat center center;
			background-size: 100% 100%;
			padding: 0rpx 22rpx;
			margin-bottom: 40rpx;

			&-dp {
				width: 100rpx;
				height: 100rpx;
			}

			&-btn {
				width: 188rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				background: linear-gradient( 360deg, #009E35 0%, #10E658 100%);
				border-radius: 100rpx;
				font-size: 28rpx;
			}
		}

		&-b1 {
			display: flex;
			overflow-y: auto;
			padding-bottom: 40rpx;

			&-item {
				width: 128rpx;
				padding-right: 20rpx;
				padding-bottom: 30rpx;
				font-size: 24rpx;
				position: relative;
				border-bottom: 2rpx solid #1D3857;

				&-num {
					position: absolute;
					width: 100%;
					bottom: -40rpx;
					left: 0;
					text-align: right;
					padding-right: 10rpx;
				}

				&-xz {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 2rpx;
					background: #FFBE32;

					&-xd {
						position: absolute;
						right: 10rpx;
						bottom: -4rpx;
						width: 10rpx;
						height: 10rpx;
						background: #FFBE32;
						border-radius: 100rpx;
					}
				}

				&-box {
					width: 108rpx;
					height: 128rpx;
					background: #00561D;
					border-radius: 12rpx;
					border: 2rpx solid #00561D;
					color: #9C9FB2;

					image {
						width: 72rpx;
						height: 72rpx;
					}
				}

				&-ch {
					background: linear-gradient( 180deg, #007628 0%, #177747 100%);
					// border: 2rpx solid #1D3857;
					color: #FFFFFF;
				}

			}


		}

		&-mitem {
			width: 344rpx;
			height: 120rpx;
			background: #00561D;
			border-radius: 20rpx;
			float: left;
			font-size: 36rpx;
			margin-bottom: 20rpx;

			&-picb {
				width: 152rpx;
				height: 120rpx;
				background: #058731;
				border-radius: 20rpx 0rpx 0rpx 20rpx;

				image {
					width: 88rpx;
					height: 88rpx;
				}
			}

			&-txt {
				flex-grow: 1;
			}
		}

		&-mitem:nth-child(even) {
			float: right;
		}
	}
</style>